<template>
    <div>
        <div class="sliderOption">
            <div class="left">
                <span>左侧显示图层</span>
                <div>
                    <el-checkbox-group v-model="checkOptionLeft" @change="leftChange">
                        <el-checkbox v-for="(item,index) in layerOptionLeft" :key="index" :label="item">
                            {{item.name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
            <div class="right">
                <span>右侧显示图层</span>
                <el-checkbox-group v-model="checkOptionRight" @change="rightChange">
                    <el-checkbox v-for="(item,index) in layerOptionRight" :key="index" :label="item">
                        {{item.name}}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "TransformTest",
        //import引入的组件需要注入到对象中才能使用",
        components: {},
        data() {
            //这里存放数据",
            return {
                checkOptionLeft: [],
                checkOptionRight: [],
                layerOptionLeft: [],
                layerOptionRight: [],
            };
        },
        //监听属性 类似于data概念",
        computed: {},
        //监控data中的数据变化",
        watch: {},
        //方法集合",
        methods: {
            //
            Xinit() {
                for (let i = 0; i < 5; i++) {
                    this.layerOptionLeft.push({
                        index: i,
                        name: "图层" + i
                    })
                }
                console.log(this.layerOptionLeft)
            },
            leftChange(val) {
                this.$nextTick(() => {
                    for (let i = 0; i < val.length; i++) {
                        console.log(val[i]);
                        let index = this.layerOptionLeft.indexOf(val[i]);
                        this.layerOptionLeft.splice(index, 1);
                        this.layerOptionRight.push(val[i]);
                        this.layerOptionRight.sort(this.compare('index'))
                    }
                    this.checkOptionLeft = [];
                })

            },
            rightChange(val) {
                this.$nextTick(() => {
                    for (let i = 0; i < val.length; i++) {
                        console.log(val[i]);
                        let index = this.layerOptionRight.indexOf(val[i]);
                        this.layerOptionRight.splice(index, 1);
                        this.layerOptionLeft.push(val[i]);
                        this.layerOptionLeft.sort(this.compare('index'))
                    }
                    this.checkOptionRight = [];
                })
            },
            //排序
            compare(property) {
                return function (a, b) {
                    let value1 = a[property];
                    let value2 = b[property];
                    return value1 - value2;
                }
            }
        },
        //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
        beforeCreate() {
        },

        //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
        created() {

        },
        //生命周期 - 挂载之前",html模板未渲染
        beforeMount() {

        },

        //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
        mounted() {
            this.Xinit()
        },

        //生命周期 - 更新之前",数据模型已更新,html模板未更新
        beforeUpdate() {

        },
        //生命周期 - 更新之后",数据模型已更新,html模板已更新
        updated() {

        },
        //生命周期 - 销毁之前",
        beforeDestroy() {

        },
        destroyed() {

        },
        //生命周期 - 销毁完成",
        //如果页面有keep-alive缓存功能，这个函数会触发",
        activated() {

        },
    }

</script>

<style scoped>
    #slider {
        position: absolute;
        left: 50%;
        top: 0;
        background-color: #d3d3d3;
        width: 5px;
        height: 100%;
        z-index: 9999;
    }

    #slider:hover {
        cursor: ew-resize;
    }

    .sliderOption {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 400px;
        min-height: 50px;
        padding: 15px;
        color: #fafafa;
        background-color: rgba(15, 15, 15, 0.3);
        z-index: 1000;
        border-radius: 10px;
        display: flex;
        justify-content: flex-start;
        text-align: left;

    }

    .sliderOption .left {
        width: 50%;
    }

    .sliderOption .right {
        width: 50%;
    }

    .sliderOption .el-checkbox {
        color: #fafafa;
        width: 95%;
        margin: 10px 0 0 0;
    }

</style>

